<template>
	<uni-popup @maskClick="close" class="setting-popup" border-radius="20rpx 20rpx 0 0" ref="settingPopupRef" type="bottom" background-color="#fff">
		<view class="save-button" @click="saveSetting">保存</view>
		<view class="popup-content">
			<!-- <view class="row">
				<view class="txt">打开手电筒的同时播放:</view>
				<switch :checked="setting.isSync" @change="switchChange" color="#00ccc6"></switch>
			</view> -->
			<view class="row">
				<view class="txt">播放模式:</view>
				<uni-data-checkbox mode="tag" v-model="setting.playMode" :localdata="playModes" selectedColor="#00ccc6"></uni-data-checkbox>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import storage from '@/utils/storage';
import { onLoad } from '@dcloudio/uni-app';
import { DefaultSetting } from '@/constant/constant';
import { emitEvent } from '@/hooks/useEventBus';
import { showToast } from '@/utils/util';

export type PlayMode = "loop" | "random" | "order";




const playModes = ref<Array<{value: PlayMode, text: string}>>([
	{
		value: "loop",
		text: "单曲循环",
	},
	{
		value: "random",
		text: "随机播放",
	},
	{
		value: "order",
		text: "顺序播放",
	},
]);


export type Setting = {
	isSync: boolean,
	playMode: PlayMode,
}

const setting = ref<Setting>({
	isSync: false,
	playMode: "loop",
})
const settingPopupRef = ref(null);

function saveSetting() {
	console.log("saveSetting", setting.value);
	storage.setSync("setting", setting.value);
	const s = {...setting.value}
	getApp().globalData!.setting = s;
	close();
	emitEvent("changeSetting", s);
	showToast("保存", "success");
}

function switchChange(event: { detail: {value: boolean};}) {
	setting.value.isSync = event.detail.value;
}

function open() {
	getSetting();
	settingPopupRef.value && (settingPopupRef.value as any).open();
}

function close() {
	settingPopupRef.value && (settingPopupRef.value as any).close();
}

function getSetting() {
	const storageSetting = storage.getSync("setting", DefaultSetting);
	setting.value = {...storageSetting};
}

onLoad(() => {
	getSetting();
})

defineExpose({
	open,
	close
})
</script>

<style lang="scss" scoped>
.setting-popup {
	.save-button {
		font-size: 30rpx;
		height: fit-content;
		width: fit-content;
		padding: 10rpx 20rpx;
		margin: 30rpx 30rpx 20rpx auto;
		border: 2rpx solid $uni-theme-color;
		color: $uni-theme-color;
		border-radius: 10rpx;
	}
	
	.save-button:active {
		color: #fff;
		background-color: $uni-theme-color;
	}
	.popup-content {
		// height: 40vh;
		padding: 40rpx;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.row:first-child {
			margin-top: 0;
		}
		
		.row {
			text-align: 30rpx;
			width: 80%;
			margin: 40rpx 0;
			
			.txt {
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
	}
	
}
</style>